
<div class="preview">
    <label style="width: 80%">
        {!! $connect !!}
{{--        <input disabled="disabled" value="12" type="text">--}}
    </label>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="drag bi bi-arrows-move" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10zM.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708l-2-2zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8z"/>
    </svg>
    <!---这块是视图，用于绑定的-->
    <div class="view" style="display: none;">
        {!! $view !!}
    </div>
</div>
<script>
    $(function () {
        //记录初始值
        var initValue = $("#view-col").val();
        var butInitValue = $("#selectBtnStyle").val();
        //监听id为view-col的input输入框，如果输入框的值改变，则把类为view-col的元素最后添加一个类为col-6
        $("#view-col").on("input", function () {
            //再次输入之前需要先删除掉之前的col-6类
            $(".view-col").removeClass("col-" + initValue);
            let value = $(this).val();
            //把输入框内的值去除非数字
            value = value.replace(/[^0-9]/g, '');
            //如果没有数字
            if (value === "") {
                value = 12;
            }
            initValue = value;
            $(".view-col").addClass("col-" + value);
        })
        var selectElement = document.getElementById('selectBtnStyle');
        selectElement.addEventListener('change', function() {
            console.log(this.value)
            $(".view-btn").removeClass("btn-" + butInitValue);
            $(".view-btn").addClass("btn-" + this.value);
        });
        //监听事件
        document.addEventListener('DOMContentLoaded', function() {

        });
    })
</script>
